<template>
	<view>
		<svg style="background-color:#9900ef88;" width="100%" height="185px" id="svg" viewBox="0 0 1440 100"
			class="transition duration-300 ease-in-out delay-150">

			<path
				d="M 0,400 C 0,400 0,133 0,133 C 48.434485115606165,160.6626038790974 96.86897023121233,188.32520775819475 138,177 C 179.13102976878767,165.67479224180525 212.95860419075683,115.36177284631829 249,115 C 285.04139580924317,114.63822715368171 323.2966130057604,164.22770085653215 373,178 C 422.7033869942396,191.77229914346785 483.8549437862016,169.727423727553 534,153 C 584.1450562137984,136.272576272447 623.2836118494331,124.86260423325581 671,133 C 718.7163881505669,141.1373957667442 775.0106088160659,168.82215933942368 809,175 C 842.9893911839341,181.17784066057632 854.6739528863029,165.84875840904948 895,165 C 935.3260471136971,164.15124159095052 1004.293579638723,177.78280702437849 1049,160 C 1093.706420361277,142.21719297562151 1114.1517285588054,93.02001349343656 1158,95 C 1201.8482714411946,96.97998650656344 1269.0995061260555,150.13713900187525 1320,165 C 1370.9004938739445,179.86286099812475 1405.4502469369722,156.43143049906237 1440,133 C 1440,133 1440,400 1440,400 Z"
				stroke="none" stroke-width="0" fill="#9900ef88"
				class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
			<path
				d="M 0,400 C 0,400 0,266 0,266 C 49.630421501667215,234.96546423973695 99.26084300333443,203.93092847947386 146,217 C 192.73915699666557,230.06907152052614 236.58704948832957,287.24175032184144 279,307 C 321.41295051167043,326.75824967815856 362.3909590433472,309.1020702331602 398,303 C 433.6090409566528,296.8979297668398 463.84911433828165,302.3499687455177 511,290 C 558.1508856617183,277.6500312544823 622.2125836035267,247.498054784769 672,253 C 721.7874163964733,258.501945215231 757.3005512476117,299.6578121154061 789,297 C 820.6994487523883,294.3421878845939 848.5852114060268,247.87069675360667 891,228 C 933.4147885939732,208.12930324639333 990.3586031282816,214.85940087016724 1036,224 C 1081.6413968717184,233.14059912983276 1115.9803760808472,244.6916997657242 1166,262 C 1216.0196239191528,279.3083002342758 1281.7198925483294,302.3738000669359 1330,304 C 1378.2801074516706,305.6261999330641 1409.1400537258353,285.81309996653204 1440,266 C 1440,266 1440,400 1440,400 Z"
				stroke="none" stroke-width="0" fill="#9900efff"
				class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
		</svg>
		<view class="aa">
			100
		</view>

		<!--  -->
		<view class="bb">
			<uni-easyinput prefixIcon="" :inputBorder="false" v-model="value" placeholder="用户名/账号/邮箱"
				@iconClick="onClick"></uni-easyinput>
			<uni-easyinput prefixIcon="Lock" :inputBorder="false" v-model="value" placeholder="请输入登录密码"
				@iconClick="onClick2"></uni-easyinput>
		</view>
		<view class="ff">
			<view class="cc">
				忘记密码?
			</view>
		</view>
		<!-- 登录 -->
		<button>登录</button>
		<!--  -->
		<view class="gg">
			—————— 使用第三方登录 ——————
		</view>
		<!--  -->
		<view class="hh">
			<image src="../../img/images/images/登录_05.jpg" mode=""></image>
			<image src="../../img/images/images/登录_07.jpg" mode=""></image>
			<image src="../../img/images/images/登录_09.jpg" mode=""></image>
			
		</view>
		<view class="jj">
			没有账号?立即注册>>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
	}
</script>
<style lang="scss">
	.jj{
		width: 160px;
		color:#9900ef;
		margin: auto;
		margin-top: 30rpx;
	}
	.hh{
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		image{
			width: 50px;
			height: 50px;
		}
	}
	.gg {
		color:#9900ef;
		margin-top:40rpx;
		margin-left: 45rpx;
		
	}

	.ff {
		width: 750rpx;
		display: flex;
		justify-content: right;
		margin-top: 20rpx;
	}

	.bb {
		margin-top: 100rpx;
	}

	.uni-easyinput {
		width: 90%;
		margin: auto;
		border-bottom: 1px solid #ccc;
	}

	.aa {
		width: 170rpx;
		height: 100rpx;
		background-color: #fff;
		position: absolute;
		top: 70rpx;
		left: 300rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 10px;
		font-size: 44px;
		font-weight: 966;
		color: #9900ef;
	}

	.path-0 {
		animation: pathAnim-0 4s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	@keyframes pathAnim-0 {
		0% {
			d: path("M 0,400 C 0,400 0,133 0,133 C 48.434485115606165,160.6626038790974 96.86897023121233,188.32520775819475 138,177 C 179.13102976878767,165.67479224180525 212.95860419075683,115.36177284631829 249,115 C 285.04139580924317,114.63822715368171 323.2966130057604,164.22770085653215 373,178 C 422.7033869942396,191.77229914346785 483.8549437862016,169.727423727553 534,153 C 584.1450562137984,136.272576272447 623.2836118494331,124.86260423325581 671,133 C 718.7163881505669,141.1373957667442 775.0106088160659,168.82215933942368 809,175 C 842.9893911839341,181.17784066057632 854.6739528863029,165.84875840904948 895,165 C 935.3260471136971,164.15124159095052 1004.293579638723,177.78280702437849 1049,160 C 1093.706420361277,142.21719297562151 1114.1517285588054,93.02001349343656 1158,95 C 1201.8482714411946,96.97998650656344 1269.0995061260555,150.13713900187525 1320,165 C 1370.9004938739445,179.86286099812475 1405.4502469369722,156.43143049906237 1440,133 C 1440,133 1440,400 1440,400 Z");
		}

		25% {
			d: path("M 0,400 C 0,400 0,133 0,133 C 36.79416134396044,131.7570172067878 73.58832268792088,130.5140344135756 113,119 C 152.41167731207912,107.4859655864244 194.4408705922769,85.70087955248539 239,91 C 283.5591294077231,96.29912044751461 330.6481949429716,128.68244737648283 382,137 C 433.3518050570284,145.31755262351717 488.96634963583654,129.56933094158333 531,126 C 573.0336503641635,122.43066905841667 601.486406513682,131.04022885718385 647,146 C 692.513593486318,160.95977114281615 755.0880243094354,182.26975362968128 797,178 C 838.9119756905646,173.73024637031872 860.1614962485767,143.88075662409094 895,136 C 929.8385037514233,128.11924337590906 978.2659906962579,142.20721987395498 1027,157 C 1075.7340093037421,171.79278012604502 1124.7745409663921,187.29036388008905 1171,178 C 1217.2254590336079,168.70963611991095 1260.6358454381736,134.63132460568886 1305,123 C 1349.3641545618264,111.36867539431115 1394.6820772809133,122.18433769715557 1440,133 C 1440,133 1440,400 1440,400 Z");
		}

		50% {
			d: path("M 0,400 C 0,400 0,133 0,133 C 32.910902590491915,114.18786157363219 65.82180518098383,95.37572314726438 114,96 C 162.17819481901617,96.62427685273562 225.62368186655664,116.68496898457462 269,125 C 312.37631813344336,133.31503101542538 335.6834673527896,129.8844009144371 378,121 C 420.3165326472104,112.1155990855629 481.6424487222848,97.77742735767701 531,89 C 580.3575512777152,80.22257264232299 617.7467377580708,77.00588965485488 662,86 C 706.2532622419292,94.99411034514512 757.3706002454318,116.19901402290344 800,130 C 842.6293997545682,143.80098597709656 876.770861260202,150.1980542535314 914,162 C 951.229138739798,173.8019457464686 991.5459547137602,191.00876896297098 1041,171 C 1090.4540452862398,150.99123103702902 1149.0453198847567,93.76686989458474 1190,91 C 1230.9546801152433,88.23313010541526 1254.2727657472124,139.92375145869008 1293,156 C 1331.7272342527876,172.07624854130992 1385.8636171263938,152.53812427065498 1440,133 C 1440,133 1440,400 1440,400 Z");
		}

		75% {
			d: path("M 0,400 C 0,400 0,133 0,133 C 37.428816809776194,129.62172868276082 74.85763361955239,126.2434573655216 120,125 C 165.1423663804476,123.7565426344784 217.99828233156666,124.64789922067436 265,134 C 312.00171766843334,143.35210077932564 353.149237054181,161.16494575178098 400,144 C 446.850762945819,126.83505424821902 499.4047694517095,74.69231777220176 538,84 C 576.5952305482905,93.30768222779824 601.2316851389808,164.06578315941204 646,168 C 690.7683148610192,171.93421684058796 755.6684899923678,109.04454959015015 802,96 C 848.3315100076322,82.95545040984985 876.0943548915479,119.75601847998739 920,123 C 963.9056451084521,126.24398152001261 1023.9540904414407,95.93137648990029 1066,102 C 1108.0459095585593,108.06862351009971 1132.089283342689,150.51847556041147 1176,159 C 1219.910716657311,167.48152443958853 1283.6887761878031,141.99472126845387 1331,132 C 1378.3112238121969,122.00527873154613 1409.1556119060983,127.50263936577306 1440,133 C 1440,133 1440,400 1440,400 Z");
		}

		100% {
			d: path("M 0,400 C 0,400 0,133 0,133 C 48.434485115606165,160.6626038790974 96.86897023121233,188.32520775819475 138,177 C 179.13102976878767,165.67479224180525 212.95860419075683,115.36177284631829 249,115 C 285.04139580924317,114.63822715368171 323.2966130057604,164.22770085653215 373,178 C 422.7033869942396,191.77229914346785 483.8549437862016,169.727423727553 534,153 C 584.1450562137984,136.272576272447 623.2836118494331,124.86260423325581 671,133 C 718.7163881505669,141.1373957667442 775.0106088160659,168.82215933942368 809,175 C 842.9893911839341,181.17784066057632 854.6739528863029,165.84875840904948 895,165 C 935.3260471136971,164.15124159095052 1004.293579638723,177.78280702437849 1049,160 C 1093.706420361277,142.21719297562151 1114.1517285588054,93.02001349343656 1158,95 C 1201.8482714411946,96.97998650656344 1269.0995061260555,150.13713900187525 1320,165 C 1370.9004938739445,179.86286099812475 1405.4502469369722,156.43143049906237 1440,133 C 1440,133 1440,400 1440,400 Z");
		}
	}

	.path-1 {
		animation: pathAnim-1 4s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	@keyframes pathAnim-1 {
		0% {
			d: path("M 0,400 C 0,400 0,266 0,266 C 49.630421501667215,234.96546423973695 99.26084300333443,203.93092847947386 146,217 C 192.73915699666557,230.06907152052614 236.58704948832957,287.24175032184144 279,307 C 321.41295051167043,326.75824967815856 362.3909590433472,309.1020702331602 398,303 C 433.6090409566528,296.8979297668398 463.84911433828165,302.3499687455177 511,290 C 558.1508856617183,277.6500312544823 622.2125836035267,247.498054784769 672,253 C 721.7874163964733,258.501945215231 757.3005512476117,299.6578121154061 789,297 C 820.6994487523883,294.3421878845939 848.5852114060268,247.87069675360667 891,228 C 933.4147885939732,208.12930324639333 990.3586031282816,214.85940087016724 1036,224 C 1081.6413968717184,233.14059912983276 1115.9803760808472,244.6916997657242 1166,262 C 1216.0196239191528,279.3083002342758 1281.7198925483294,302.3738000669359 1330,304 C 1378.2801074516706,305.6261999330641 1409.1400537258353,285.81309996653204 1440,266 C 1440,266 1440,400 1440,400 Z");
		}

		25% {
			d: path("M 0,400 C 0,400 0,266 0,266 C 33.87583913415345,287.53049923944474 67.7516782683069,309.0609984788895 118,300 C 168.2483217316931,290.9390015211105 234.86912606092585,251.28650532388673 278,237 C 321.13087393907415,222.71349467611327 340.7718174879896,233.7929802255635 382,254 C 423.2281825120104,274.2070197744365 486.0436039871157,303.5415737738592 531,297 C 575.9563960128843,290.4584262261408 603.0537665635476,248.04072467899965 645,236 C 686.9462334364524,223.95927532100035 743.7413297586942,242.29552751014222 785,264 C 826.2586702413058,285.7044724898578 851.9809144016759,310.7771652804315 892,296 C 932.0190855983241,281.2228347195685 986.3350126346022,226.5958113681318 1036,227 C 1085.6649873653978,227.4041886318682 1130.6790350599147,282.8395892470414 1178,293 C 1225.3209649400853,303.1604107529586 1274.9488471257387,268.04583164370246 1319,256 C 1363.0511528742613,243.95416835629754 1401.5255764371307,254.97708417814877 1440,266 C 1440,266 1440,400 1440,400 Z");
		}

		50% {
			d: path("M 0,400 C 0,400 0,266 0,266 C 34.143728119648884,262.78312222539 68.28745623929777,259.56624445077995 115,254 C 161.71254376070223,248.43375554922005 220.9939031624578,240.51814442227018 264,242 C 307.0060968375422,243.48185557772982 333.736931110871,254.36117786013932 373,262 C 412.263068889129,269.6388221398607 464.058372394058,274.0371441371727 513,265 C 561.941627605942,255.96285586282733 608.0295793128971,233.49024559117012 649,226 C 689.9704206871029,218.50975440882988 725.8233103543532,226.00187349814686 767,240 C 808.1766896456468,253.99812650185314 854.6771792696898,274.5022604162424 903,281 C 951.3228207303102,287.4977395837576 1001.4679725668873,279.9890848368834 1047,275 C 1092.5320274331127,270.0109151631166 1133.450930462761,267.5414002362237 1180,258 C 1226.549069537239,248.45859976377628 1278.7283055820683,231.8453142182218 1323,232 C 1367.2716944179317,232.1546857817782 1403.635847208966,249.0773428908891 1440,266 C 1440,266 1440,400 1440,400 Z");
		}

		75% {
			d: path("M 0,400 C 0,400 0,266 0,266 C 45.43422126756846,280.00981727195295 90.86844253513692,294.0196345439059 128,295 C 165.13155746486308,295.9803654560941 193.96045112702075,283.9312790963293 240,265 C 286.03954887297925,246.06872090367068 349.2897529567802,220.2552490707768 397,227 C 444.7102470432198,233.7447509292232 476.8805370458583,273.04772462056354 518,284 C 559.1194629541417,294.95227537943646 609.1880988597869,277.55385244696913 660,264 C 710.8119011402131,250.44614755303084 762.3670675149942,240.7368655915597 802,250 C 841.6329324850058,259.2631344084403 869.3436310802362,287.498685186792 916,292 C 962.6563689197638,296.501314813208 1028.2584081640605,277.2683936612722 1067,263 C 1105.7415918359395,248.73160633872777 1117.622736263522,239.42774016811902 1156,235 C 1194.377263736478,230.57225983188098 1259.2506467818507,231.0206456662517 1311,237 C 1362.7493532181493,242.9793543337483 1401.3746766090746,254.48967716687415 1440,266 C 1440,266 1440,400 1440,400 Z");
		}

		100% {
			d: path("M 0,400 C 0,400 0,266 0,266 C 49.630421501667215,234.96546423973695 99.26084300333443,203.93092847947386 146,217 C 192.73915699666557,230.06907152052614 236.58704948832957,287.24175032184144 279,307 C 321.41295051167043,326.75824967815856 362.3909590433472,309.1020702331602 398,303 C 433.6090409566528,296.8979297668398 463.84911433828165,302.3499687455177 511,290 C 558.1508856617183,277.6500312544823 622.2125836035267,247.498054784769 672,253 C 721.7874163964733,258.501945215231 757.3005512476117,299.6578121154061 789,297 C 820.6994487523883,294.3421878845939 848.5852114060268,247.87069675360667 891,228 C 933.4147885939732,208.12930324639333 990.3586031282816,214.85940087016724 1036,224 C 1081.6413968717184,233.14059912983276 1115.9803760808472,244.6916997657242 1166,262 C 1216.0196239191528,279.3083002342758 1281.7198925483294,302.3738000669359 1330,304 C 1378.2801074516706,305.6261999330641 1409.1400537258353,285.81309996653204 1440,266 C 1440,266 1440,400 1440,400 Z");
		}
	}

	/* From cssbuttons.io by @ShadowShahriar */
	button {
		--border-radius: 15px;
		--border-width: 4px;
		appearance: none;
		position: relative;
		// padding: 1em 2em;
		border: 0;
		background-color: #9900ef;
		font-family: "Roboto", Arial, "Segoe UI", sans-serif;
		font-size: 18px;
		font-weight: 500;
		color: #fff;
		z-index: 2;
		// width: 187.6px;
		// height: 41px;
		width: 50%;
		height: 50px;
		margin-top: 30rpx;
	}

	button::after {
		--m-i: linear-gradient(#000, #000);
		--m-o: content-box, padding-box;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 200%;
		height: 200%;
		padding: var(--border-width);
		border-radius: var(--border-radius);
		background-image: conic-gradient(#488cfb,
				#29dbbc,
				#ddf505,
				#ff9f0e,
				#e440bb,
				#655adc,
				#488cfb);
		-webkit-mask-image: var(--m-i), var(--m-i);
		mask-image: var(--m-i), var(--m-i);
		-webkit-mask-origin: var(--m-o);
		mask-origin: var(--m-o);
		-webkit-mask-clip: var(--m-o);
		mask-composite: exclude;
		-webkit-mask-composite: destination-out;
		filter: hue-rotate(0);
		animation: rotate-hue linear 500ms infinite;
		animation-play-state: paused;
	}

	button:hover::after {
		animation-play-state: running;
	}

	@keyframes rotate-hue {
		to {
			filter: hue-rotate(1turn);
		}
	}

	button,
	button::after {
		box-sizing: border-box;
	}

	button:active {
		--border-width: 8px;
	}
</style>
